<template>
  <div class="app-container">
    <div class="main-panel">
      <el-form
        class="form"
        ref="form"
        :model="form"
        :rules="rules"
        label-width="80px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item class="form-item" label="核销码" prop="code">
              <el-input
                class="input-item"
                v-model="form.code"
                placeholder="请使用扫码枪扫描卡券二维码，或手工输入核销码"
                maxlength="100"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="action">
        <el-button type="primary" style="height: 50px" @click="submitConfirm"
          >确定核销</el-button
        >
        <el-button @click="cancel" style="height: 50px">返回列表</el-button>
      </div>
    </div>

    <!--核销对话框 start-->
    <el-dialog
      title="核销卡券"
      :visible.sync="open"
      class="common-dialog"
      width="700px"
      append-to-body
    >
      <el-form
        ref="confirmForm"
        :model="confirmForm"
        :rules="confirmRules"
        label-width="120px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="卡券类型：">
              <span class="coupon-type"
                >[{{ getName(typeList, couponInfo.type) }}]</span
              >
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="卡券名称：">
              <el-input
                style="width: 420px"
                v-model="couponInfo.name"
                disabled
                maxlength="100"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="userInfo">
          <el-col :span="24">
            <el-form-item label="会员名称：">
              <el-input
                style="width: 420px"
                v-model="userInfo.name"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="有效期：">
              <el-input
                style="width: 420px"
                v-model="couponInfo.effectiveDate"
                disabled
                maxlength="100"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="couponInfo.amount">
          <el-col :span="24">
            <el-form-item label="卡券面额：">
              <el-input
                style="width: 200px"
                v-model="couponInfo.amount.toFixed(2)"
                disabled
              ></el-input>
              <span class="unit">元</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="couponInfo.type == 'P'">
          <el-col :span="24">
            <el-form-item label="卡券余额：" prop="balance">
              <el-input
                v-model="couponInfo.balance.toFixed(2)"
                style="width: 200px"
                disabled
              ></el-input>
              <span class="unit">元</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="couponInfo.type == 'P'">
          <el-col :span="24">
            <el-form-item label="核销金额：" prop="amount">
              <el-input
                v-model="confirmForm.amount"
                style="width: 200px"
                placeholder="请输入核销金额"
              ></el-input>
              <span class="unit">元</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="couponInfo.type == 'T'">
          <el-col :span="24">
            <el-form-item label="核销次数：" prop="useRule">
              <span class="info"
                >总共<b style="color: green">{{ couponInfo.useRule }}</b
                >次，已核销<b style="color: red">
                  {{ couponInfo.confirmCount }}</b
                >次</span
              >
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="核销备注：">
              <el-input
                v-model="confirmForm.remark"
                type="textarea"
                rows="2"
                placeholder="请输入核销备注"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="卡券说明：">
              <el-input
                v-model="couponInfo.description"
                type="textarea"
                rows="3"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="doSubmitConfirm">确定核销</el-button>
        <el-button @click="cancelConfirm">取消</el-button>
      </div>
    </el-dialog>
    <!--核销对话框 end-->
  </div>
</template>

<script>
import { getConfirmInfo, doConfirm } from '@/api/coupon/coupon'
export default {
  name: 'CouponConfirmIndex',
  data() {
    return {
      // 遮罩层
      loading: false,
      // 核销弹框
      open: false,
      form: { id: '', code: '' },
      confirmForm: { userCouponId: '', amount: '', remark: '' },
      couponInfo: {},
      userInfo: {},
      typeList: [],
      // 表单校验
      rules: {
        code: [
          { required: true, message: '核销码不能为空', trigger: 'blur' },
          {
            min: 2,
            max: 100,
            message: '核销码长度必须介于2和100之间',
            trigger: 'blur',
          },
        ],
      },
      confirmRules: {
        amount: [
          { required: true, message: '核销金额不能为空', trigger: 'blur' },
        ],
      },
    }
  },
  created() {
    this.form.code = this.$route.query.code
  },
  activated() {
    this.form.code = this.$route.query.code
  },
  methods: {
    // 取消按钮
    cancel() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.push({ path: '/coupon/userCoupon/index' })
    },
    // 确定核销
    submitConfirm: function () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          getConfirmInfo(this.form).then((response) => {
            this.couponInfo = response.data.couponInfo
            this.confirmForm.userCouponId = this.couponInfo.id
            this.userInfo = response.data.userInfo
              ? response.data.userInfo
              : null
            this.typeList = response.data.typeList
            this.open = true
          })
        }
      })
    },
    // 执行核销
    doSubmitConfirm: function () {
      this.$refs['confirmForm'].validate((valid) => {
        if (valid) {
          doConfirm(this.confirmForm).then((response) => {
            if (response.data) {
              this.open = false
              this.$modal.msgSuccess('卡券核销成功')
              this.confirmForm.remark = ''
            }
          })
        }
      })
    },
    cancelConfirm: function () {
      this.open = false
    },
  },
}
</script>
<style scoped>
.main-panel {
  margin-top: 10px;
  display: flex;
  border: solid 1px #cccccc;
  padding: 60px 0px 40px 0px;
  border-radius: 2px;
  background: #f4f4f4;
  min-width: 950px;
}
.main-panel .action {
  margin-left: 10px;
  min-width: 200px;
}
.main-panel .el-input {
  min-width: 580px;
}
.input-item >>> .el-input__inner {
  border: #00acac solid 2px;
  line-height: 50px;
  height: 50px;
}
.form-item >>> .el-form-item__label {
  line-height: 50px;
  height: 50px;
}
.coupon-type {
  font-weight: bold;
  color: #ff5b57;
}
.unit {
  margin-left: 5px;
}
</style>
